<template>
  <div class="page3">
    <h1 class="title">\ 组织机构</h1>
    <el-timeline>
      <el-timeline-item v-for="(lead, index) in leadList" :key="index" :hide-timestamp="true">
        <h1 class="title2">{{ lead.title }}</h1>
        <ul class="lead-wrap">
          <li class="lead-item" v-for="(item, indexx) in lead.names" :key="indexx">
            <span class="name">{{ item.name }}</span>
            <span class="label">{{ item.label }}</span>
          </li>
        </ul>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

<script>
export default {
  name: "page3",
  data() {
    return {
      leadList: [
        {
          title: "院领导",
          names: [
            { name: "王勇", label: "院长(挂职)" },
            { name: "邓维", label: "党总支书记、副院长" },
            { name: "刘莉湘君", label: "党总支副书记" },
            { name: "柯捷", label: "副院长" }
          ]
        },
        {
          title: "院教学行政工作办公室",
          names: [
            { name: "朱吴生", label: "办公室主任" },
            { name: "陈洁怡", label: "教学秘书" }
          ]
        },
        {
          title: "院学生工作办公室",
          names: [
            { name: "宋佳", label: "团委书记" },
            { name: "王子玉", label: "辅导员" },
            { name: "唐博洋", label: "辅导员" },
            { name: "张美", label: "辅导员" },
            { name: "尹诗雯", label: "辅导员" },
            { name: "董光光", label: "辅导员" }
          ]
        },
        {
          title: "软件工程教研室",
          names: [{ name: "胡庆辉", label: "主任" }]
        },
        {
          title: "物联网工程教研室",
          names: [{ name: "刘洪林", label: "主任" }]
        },
        {
          title: "计算机应用教研室",
          names: [{ name: "张亚红", label: "主任" }]
        },
        {
          title: "实验中心",
          names: [{ name: "陈勇", label: "主任" }]
        }
      ]
    };
  }
};
</script>

<style scoped lang="less">
.lead-wrap {
  display: flex;
  flex-wrap: wrap;
  margin-left: 40px;
  .lead-item {
    margin-right: 40px;
    padding-bottom: 20px;
    .name {
      font-size: 18px;
      font-weight: 700;
    }
    .label {
      color: #4d89d8;
    }
  }
}
.el-timeline-item {
  &:first-child {
    .name {
      font-size: 25px;
    }
  }
}
</style>